<template>
     <div class="CeremonyHall  h100" v-loading="loading">
      <div class="PageContent">
        <el-form :model="ruleForm" :inline="true" ref="ruleForm" label-width="100px" class="PageItem margintop20">
          <el-row :gutter="5" class="fileSearch">
            <el-form-item label="办理时间:" >
              <el-date-picker type="datetime" placeholder="选择时间" v-model="ruleForm.appointmentDateStart"   format="yyyy-MM-dd hh:mm:ss" ></el-date-picker>-
              <el-date-picker type="datetime" placeholder="选择时间" v-model="ruleForm.appointmentDateEnd"   format="yyyy-MM-dd hh:mm:ss"></el-date-picker>
            </el-form-item>
            <el-form-item label="业务编码:">
              <el-input v-model="ruleForm.businessCode"></el-input>
            </el-form-item>
            <el-form-item label="逝者姓名:" prop="deadName">
              <el-input v-model="ruleForm.deadName" clearable></el-input>
            </el-form-item>
           <el-form-item label="家属/承办人:">
            <el-input v-model="ruleForm.memberName" ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" size="mini"  @click="onSubmit('search')">查询</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            <el-button type="primary" size="mini" plain @click="openExecl">导出Excel</el-button>
          </el-form-item>
          </el-row>
          <el-table
            :data="tableData"
            border
            :header-cell-style="{background:'rgb(246,247,251)',color:'#606266'}"
            stripe
            :height="tableHeight">
            <el-table-column sortable align = 'center'  prop="businessCode"  label="业务编码"  width="200">
            </el-table-column>
          
            <el-table-column
              prop="deadName"
              align = 'center'
              label="逝者姓名"
              width="150">
            </el-table-column>
            <el-table-column
              prop="deadGender"
              align = 'center'
              label="逝者性别"
              width="120">
            </el-table-column>
            <el-table-column
              prop="deadAge"
              align = 'center'
              label="年龄"
              width="100">
            </el-table-column>
            <el-table-column
              prop="certificateType"
              align = 'center'
              label="逝者证件类型"
              width="150">
            </el-table-column>
            <el-table-column
              prop="certificateNo"
              align = 'center'
              label="逝者证件号码"
              width="200">
            </el-table-column>

            <el-table-column
              prop="contact"
              align = 'center'
              label="家属/承办人"
              width="120">
            </el-table-column>
            <el-table-column
              prop="contactPhone"
              align = 'center'
              label="联系方式"
              width="150">
            </el-table-column>
            <el-table-column
              prop="cremationOldNo"
              align = 'center'
              label="原火化证号"
              width="150">
            </el-table-column>
            <el-table-column
              prop="cremationNewNo"
              align = 'center'
              label="补办火化证号"
              width="150">
            </el-table-column>
            <el-table-column
              prop="operatorTime"
              align = 'center'
              label="办理时间"
              width="150">
            </el-table-column>
            <el-table-column
              prop="fullName"
              align = 'center'
              label="办理人"
              width="100">
            </el-table-column>
          </el-table>
          <p style="text-align: right;margin-top: 20px;">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pager.currentPage"
              :page-size="pager.pageSize"
              background
              layout="prev, pager, next, jumper"
              :total="pager.total">
            </el-pagination>
          </p>
        </el-form>
      </div>
    </div> 
</template>

<script>
  import {dataFormatetmd} from '@/utils/index'
  import * as Type from '@/api/service'
  import download from "@/api/download"
    export default {
        name: "rePrintRecord",
      data(){
        return{
          loading:false,
          type:[],
          ruleForm: {
            "operationStartTime": "",
            "operationEndTime": "",
            "businessCode":"",
            "deadName": "",
            "memberName": "",
            "pageSize": 0,
            "currentPage": 0,
            "exportExcelFlag": 0
          },
          pager:{
            "pageSize": 20,
            "total": 1,
            "currentPage": 1
          },
          tableData: [],
          tableHeight:0,
         
        }
      },//载入按钮
      mounted(){
        this.onSubmit();
        var that = this;
        window.onresize=function() {
          var search = document.getElementsByClassName("fileSearch")[0].offsetHeight
          var dom = document.getElementsByClassName("PageContent")[0].offsetHeight
          that.tableHeight =dom - search - 110
        }
      },
      //注销window.onresize事件
      destroyed(){
        window.onresize = null;
      },
      updated(){
        this.$nextTick(()=>{
          var dom = document.getElementsByClassName("PageContent")[0].offsetHeight
          var search = document.getElementsByClassName("fileSearch")[0].offsetHeight
          this.tableHeight =dom - search - 110
        })
      },
      methods:{
        onSubmit(value){
          this.loading=true
          if (value) {
            this.pager.currentPage = 1;
          }
          var postData = {
            "operationStartTime": dataFormatetmd(new Date(this.ruleForm.operationStartTime)),
            "operationEndTime": dataFormatetmd(new Date(this.ruleForm.operationEndTime)),
            "businessCode":this.ruleForm.businessCode,
            "deadName": this.ruleForm.deadName,
            "memberName": this.ruleForm.memberName,
            "pageSize": this.pager.pageSize,
            "currentPage": this.pager.currentPage,
            "exportExcelFlag": 0,            //表示显示 1表示导出execl
            "orderField	":"",     //排序字段
            "orderType":""        //排序顺序
          }
          //查询接口
          Type['loadReplaceCremationCertificateRecord'](postData).then(response => {
            const { data }=response;
            if (!data) {
              this.loading = false;
              this.$message('数据读取失败')
              return
            }
            this.tableData = data.list
            this.pager = data.pager
            this.loading=false
            //   //数据读取成功
          }).catch(error => {
            this.$message(error)
            this.loading=false
            this.tableData = []
          })
        },
        /** 重置按钮操作 */
        resetQuery() {
          this.ruleForm.operationStartTime="";
          this.ruleForm.operationEndTime="";
          this.$refs["ruleForm"].resetFields();
          this.onSubmit();
        },
        // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function (size) {
          this.pager.pagesize = size;
          alert(pagesize)  //每页下拉显示数据
        },
        handleCurrentChange: function(currentPage){
          this.pager.currentPage = currentPage;
          this.onSubmit()  //点击第几页
        },
        openExecl(){
          // window.location.href = "excel地址"
          var postData = {
            "operationStartTime": dataFormatetmd(new Date(this.ruleForm.operationStartTime)),
            "operationEndTime": dataFormatetmd(new Date(this.ruleForm.operationEndTime)),
            "businessCode":this.ruleForm.businessCode,
            "deadName": this.ruleForm.deadName,
            "memberName": this.ruleForm.memberName,
            "pageSize": this.pager.pageSize,
            "currentPage": this.pager.currentPage,
            "exportExcelFlag": 1,            //0表示显示 1表示导出execl
            "orderField	":"",     //排序字段
            "orderType":""        //排序顺序
          }
          // 补办火化证记录导出
          download.exportExcel(Type["ReCremationCerEXPEXC"],postData,"补办火化证记录_"+download.getDateTime()+".xlsx");
        },
      }
    }
</script>

<style scoped>

  .w150{
    width:150px;
  }
</style>
